import React from 'react';
import PropTypes from 'prop-types';

import "./GlobalWordCloud.less";

import  * as CommonUtil from '../../util/CommonUtil';

export default class GlobalWordCloudComponent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {};
        this.state.contentList = this.props.contentList;
    };

    renderListItem() {
        let contentRenderList = [];
        if (this.state) {
            const {contentList} = this.state;

            contentList.map(function (item, index) {
                const {content, size} = item;
                let color = CommonUtil.getRandomColor({
                    lower: 50,
                    upper: 200
                });
                contentRenderList.push(
                    <a href="javascript:void(0)" key={index} style={{color,fontSize : size + "px"}}
                       className="globalWordCloud-item">{content}</a>);
            });
        }

        const {globalWordCloudItemContainer} = this.refs;
        if (globalWordCloudItemContainer) {
            globalWordCloudItemContainer.innerHTML = "";
        }

        return (
            <div className="globalWordCloud-item-container" ref="globalWordCloudItemContainer">
                {CommonUtil.shuffleArray(contentRenderList)}
            </div>
        );

    }

    render() {
        const {id, width, height, contentList} =this.props;

        return (
            <div id={id} className="globalWordCloud" style={{ 'width':width, 'height':height }}>
                {this.renderListItem()}
            </div>
        );
    }

    componentWillReceiveProps(nextProps) {
        this.rops = nextProps;
        this.state.contentList = nextProps.contentList;
    }

    componentDidUpdate() {

        const {globalWordCloudItemContainer} = this.refs;
        let self = this;
        const RADIUS = 160;
        const ANGLE = Math.PI / 180;
        const howElliptical = 1;
        const d = 300;

        if (globalWordCloudItemContainer) {
            let tempTagList = [];
            if (self.intervalNo) {
                clearInterval(self.intervalNo);
            }

            const quotiety = ( globalWordCloudItemContainer.offsetWidth / globalWordCloudItemContainer.offsetHeight ) * 0.8;
            (function () {
                let length = globalWordCloudItemContainer.childNodes.length;
                tempTagList = [];
                for (let i = 0; i < length; i++) {
                    const {offsetWidth, offsetHeight} = globalWordCloudItemContainer.childNodes[i];
                    tempTagList.push({
                        offsetWidth, offsetHeight
                    })
                }

                for (var i = 0; i < length; i++) {
                    let phi = Math.acos(-1 + (2 * (i + 1) - 1) / length);
                    let theta = Math.sqrt(length * Math.PI) * phi;

                    tempTagList[i].cx = RADIUS * Math.cos(theta) * Math.sin(phi);
                    tempTagList[i].cy = RADIUS * Math.sin(theta) * Math.sin(phi);
                    tempTagList[i].cz = RADIUS * Math.cos(phi);
                }


                let blastIndex = 1;
                let blastCount = 20;
                let blastIntervalNo;

                blastIntervalNo = setInterval(() => {
                    if (self.intervalNo) {
                        clearInterval(self.intervalNo);
                    }
                    let leftStart = globalWordCloudItemContainer.offsetWidth / 2;
                    let topStart = globalWordCloudItemContainer.offsetHeight / 2;
                    if (blastIndex < blastCount) {
                        for (var i = 0; i < length; i++) {
                            let leftEnd = tempTagList[i].cx * quotiety + globalWordCloudItemContainer.offsetWidth / 2 - tempTagList[i].offsetWidth / 2;
                            let topEnd = tempTagList[i].cy + globalWordCloudItemContainer.offsetHeight / 2 - tempTagList[i].offsetHeight / 2;

                            let childNode = globalWordCloudItemContainer.childNodes[i];

                            childNode.style.left = leftStart + ((leftEnd - leftStart) / blastCount) * blastIndex + 'px';
                            childNode.style.top = topStart + ((topEnd - topStart)) / blastCount * blastIndex + 'px';
                        }
                        blastIndex++;
                    } else {
                        rotate();
                        clearInterval(blastIntervalNo);
                    }

                }, 20);
            })();

            function sineCosine(a, b, c) {
                return {
                    sa: Math.sin(a * ANGLE),
                    ca: Math.cos(a * ANGLE),
                    sb: Math.sin(b * ANGLE),
                    cb: Math.cos(b * ANGLE),
                    sc: Math.sin(c * ANGLE),
                    cc: Math.cos(c * ANGLE)
                };
            }

            function rotate() {
                self.intervalNo = setInterval(
                    () => {
                        let a = 0.4, b = 0.6, c = 0;
                        let {sa, ca, sb, cb, sc, cc} = sineCosine(a, b, c);
                        var l = globalWordCloudItemContainer.offsetWidth / 2;
                        var t = globalWordCloudItemContainer.offsetHeight / 2;
                        for (var i = 0; i < tempTagList.length; i++) {
                            var rx1 = tempTagList[i].cx;
                            var ry1 = tempTagList[i].cy * ca + tempTagList[i].cz * (-sa);
                            var rz1 = tempTagList[i].cy * sa + tempTagList[i].cz * ca;

                            var rx2 = rx1 * cb + rz1 * sb;
                            var ry2 = ry1;
                            var rz2 = rx1 * (-sb) + rz1 * cb;

                            var rx3 = rx2 * cc + ry2 * (-sc);
                            var ry3 = rx2 * sc + ry2 * cc;
                            var rz3 = rz2;

                            tempTagList[i].cx = rx3;
                            tempTagList[i].cy = ry3;
                            tempTagList[i].cz = rz3;

                            let per = d / (d + rz3);

                            tempTagList[i].x = (howElliptical * rx3 * per) - (howElliptical * 2);
                            tempTagList[i].y = ry3 * per;
                            tempTagList[i].scale = per;
                            tempTagList[i].alpha = per;

                            tempTagList[i].alpha = (tempTagList[i].alpha - 0.6) * (10 / 6);

                            if (globalWordCloudItemContainer.childNodes[i].style) {

                                globalWordCloudItemContainer.childNodes[i].style.zIndex = i;

                                globalWordCloudItemContainer.childNodes[i].style.left = tempTagList[i].cx * quotiety + l - tempTagList[i].offsetWidth / 2 + 'px';
                                globalWordCloudItemContainer.childNodes[i].style.top = tempTagList[i].cy + t - tempTagList[i].offsetHeight / 2 + 'px';

                                globalWordCloudItemContainer.childNodes[i].style.filter = "alpha(opacity=" + 100 * tempTagList[i].alpha + ")";
                                globalWordCloudItemContainer.childNodes[i].style.opacity = tempTagList[i].alpha;
                            }
                        }
                    }, 30);
            }


        }
    }


    setContentList(contentList) {
        this.setState({
            "contentList": contentList,
        });
    }

}

GlobalWordCloudComponent.propTypes = {
    "id": PropTypes.string.isRequired,
    "width": PropTypes.string,
    "height": PropTypes.string,
    "contentList": PropTypes.array
}

GlobalWordCloudComponent.defaultProps = {
    "width": "100%",
    "height": "100%",
    "contentList": []
};
